import React, { Component } from "react";
import { connect } from "dva";

import { Alert, Steps, Upload, message, Button } from "antd";

import "./less/batch.less";
import { host } from "../../../services/api";

const { Step } = Steps;

@connect(state => ({
  global: state.global
}))
// 批量导入-导出/修改组织机构
export default class ExportChanges extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      //
    };
  }

  handleClickLink = () => {
    return (
      // <Button type="primary" onClick={() => window.open(`${lib.host}/static/template/OrderPerson_Template.xls`, "_self")}>导出员工信息</Button>
      <Button
        type="primary"
        onClick={() => {
          console.log(this.props.global);
          window.open(
            `${host}/system/com-depart/export-depart?comId=${
              this.props.global.companyInfo.comId
            }`,
            "_self"
          );
        }}
      >
        导出员工信息
      </Button>
    );
  };

  handleClickUpload = () => {
    const props = {
      name: "xfile",
      action: `${host}/system/com-depart/get-import-depart-json`,
      headers: {
        authorization: "Basic c2Fhc3dlYjp3ZWI="
      },
      onChange(info) {
        console.log(info, "onChange-info");
        if (info.file.status !== "uploading") {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === "done") {
          message.success(`${info.file.name} 成功上传！`);
        } else if (info.file.status === "error") {
          message.error(`${info.file.name} 上传失败！`);
        }
      }
    };
    console.log(props, "props");

    return (
      <Upload {...props}>
        <Button type="primary">选择上传文件</Button>
      </Upload>
    );
  };

  render() {
    console.log(this.props, "this.props.companyInfo");

    return (
      <div className="ExportChanges">
        {/* <div className="batch-header">
          <Breadcrumb>
            <Breadcrumb.Item><a href="">组织架构</a></Breadcrumb.Item>
            <Breadcrumb.Item><a href="">运营二部</a></Breadcrumb.Item>
            <Breadcrumb.Item className="batch-span">批量导入/导出</Breadcrumb.Item>
          </Breadcrumb>
        </div> */}
        <div className="batch-content">
          <div className="batch-body">
            {/* <div className="batch-tabs">
              <ul className="clearfix">
                <li onClick={() => { this.props.history.push(`/batch`) }}>
                  <span>新建组织机构</span>
                </li>
                <li className="active">
                  <span>导出/修改组织机构</span>
                </li>
              </ul>
            </div> */}
            {/* <Alert
              message="导入会覆盖原有员工的信息，如需更新已存在的员工，请先导出通讯录，在导出表格里进行修改。"
              type="warning"
              showIcon
            /> */}
            <div className="tabs-content">
              <Steps direction="vertical" size="small" current={1}>
                <Step
                  title="导出所有员工信息，批量修改员工信息"
                  description={this.handleClickLink()}
                />
                {/*  <Step
                  title="上传修改好的员工信息表"
                  description={this.handleClickUpload()}
                /> */}
              </Steps>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
